<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-12 10:56:47
 * @LastEditors: [wangll]
 * @LastEditTime: 2021-09-23 18:06:34
-->
<template>
  <div>
    <!-- 头部开始 -->
    <Header/>
    <!-- 头部结束 -->

    <!-- 体部开始 -->
    <div class="content">
      <div class="wrapper">
        <!-- {{category}} -->
        <div class="title">
          {{category.name}}
        </div>
        <div class="inner_content">
          <!-- {{categoryList}} -->
          <!-- 左侧表格 -->
          <div class="articleList">
              <ul v-if='categoryList.total>0'>
                <li class="list_list" v-for='item in categoryList.list'  :key='item.id'>
                  <div class="article" @click="toDetail(item.id)">{{item.title}}</div>
                  <div class="list">
                    <!-- 发表事件 -->
                    <span>{{item.publishTime | fmtDate}}</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <!-- 阅读次数 -->
                    <span>{{item.readTimes}}</span>
                  </div>
                </li>
              </ul>  
              <div v-else class="nodata">暂无数据</div>
              <!-- 分页开始 -->
              <div class="page">
                <el-pagination
                  hide-on-single-page
                  background
                  layout="prev, pager, next"
                  @current-change="handleCurrentChange"
                  :page-size="categoryList.pageSize"
                  :total="categoryList.total">
              </el-pagination>
              </div>
              <!-- 分页结束 -->
          </div>
          <!-- 右侧表格 -->
            <div class="right">
              <Table/>
            </div>
        </div>
      </div>
    </div>
    <!-- 体部结束 -->


    <!-- 底部开始 -->
      <Footer/>
    <!-- 底部结束 -->

  </div>
</template>
<script>
import {get} from '../utils/request';
import Header from '../components/Header.vue';
import Footer from '../components/Footer.vue';
import Table from '../components/Table.vue'
  export default{
    //注册组件
    components:{
      Header,
      Footer,
      Table
    },
    created(){
      // 接收参数
      this.category=this.$route.query;
      this.loadArticle();
      this.loadHotArtical();
    },
    //监听器  监听$route.query
    watch:{
      '$route.query':{
        handler(query){
          // 参数发送变化进行重新赋值
          this.category=query;
          // 赋值之后再重新加载
          this.loadArticle();
          
        },
        deep:true
      }
    },
    methods:{
      //跳转文章
      toDetail(id){
        // alert(JSON.stringify(item));
        this.$router.push({
          path:'/article',
          query:{id}
        })
      },
      //加载右边页面
      loadHotArtical(){
        let url='/index/article/findHotArticles';
        get(url).then(res=>{
        this.hotArticles=res.data;
          // console.log(res.data);
        })
      },
      //给分页按钮绑定事件
      handleCurrentChange(page){
        // alert(page);  
        this.params.page=page;
        this.loadArticle();
      },
      //加载文字方法
      loadArticle(){
        let url='/index/article/pageQuery';
        this.params.categoryId=this.category.id;
        get(url,this.params).then(res=>{
          this.categoryList=res.data;
        })
      }
    },
    data(){
      return {
        hotArticles:{},
        category:{},
        params:{
          page:1,
          pageSize:5,
        },
        categoryList:{list:[]},
      }
    }
  }
</script>
<style lang="scss">
  .content{
    background-color:#cbe3e5 ;
    &>.wrapper{      
      .inner_content{
        .right{
          width: 400px;
          margin: 1em 2em;
        }
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        &>div{
          background-color: #fff;
          height: 1000px;
          // padding: 1em .5em;
          border-radius: 5px;
        }
        .articleList{
          .nodata{
            color: #057d7c;
            text-align: center;
            padding: 1em .5em;
          }
          .page{
            text-align: center;
            padding: 1em .5em;
          }
          ul>li.list_list{
            &>div{
              line-height: 2em;
              padding: 1em .5em;
            }
            .article:hover{
              cursor: pointer;
              color: #057d7c;
            }
            border-bottom: 1px solid #ededed;
          }
          flex: 1;
          margin-right: 2em;
        }
      }
      .title{
        font-size: 20px;
        font-weight: bold;
        color: #057d7c;
        padding: 1em .5em;
      }
    }
  }
</style>
